<template>
  <div>
    <paco-title :left-Show="true" :left-method ="leftGo" :name="titleName"></paco-title>
    <!--搜索框-->
    <div class="my-search-bar">
      <div class="my-search-bar-area" v-bind:class="{'my-search-bar-inputted': showSearch}">
        <i class="paco icon-search my-search-bar-icon" v-show="!content"></i>
        <input type="text" :placeholder = "placeholder" class="my-search-bar-input"  v-bind:class="{'my-search-bar-input1': showSearch}" v-model="content" @input="checkContent" >
        <i class="my-search-bar-close" v-show="content" @click="clearContent"></i>
      </div>
      <button class="my-search-bar-button" :style="btnStyle" @click="searchContent" v-show="showSearch">搜索</button>
    </div>
    <slot name="search-main">
      <div v-show="showResult">
        <div class="z-query-tags" v-if="!noItems">
          <div class="bor-bot" v-for="item in searchItems" @click="addQueryTag(item)" style="text-overflow:ellipsis;">
            <span style="margin-left: 0.75rem;">{{item.accName}}</span>
          </div>
        </div>
        <div class="returnNull" style="clear:both;" v-if="noItems">
          <div class="returnNull2_img"></div>
          <div class="color_a5 font-30" style="margin:0.5rem 0 0.5rem 0;">暂无此客户，请重新输入或新建客户</div>
          <img  :src="imgUrl + '/static/images/newclient.png'" style="width:5rem;padding-left:0.5rem;" @click="newClient"/>
        </div>
      </div>
    </slot>
  </div>
</template>

<style scoped>
  .my-search-bar{
    width: 100%;
    height: 3.1rem;
    background: #ffffff;
    position: relative;
  }
  .my-search-bar-area{
    height: 1.8rem;
    margin: 0rem 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 1.8rem;
    position: relative;
    top: 0.65rem;
  }
  .my-search-bar-icon{
    margin-left: 0.8rem;
    position: absolute;
    left: 0rem;
    top: 0rem;
  }
  .my-search-bar-input{
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.75rem;
    width: 60%;
    margin-left: 1rem;
    position: absolute;
    left: 1rem;
    color: #353638;
    top: 0.555rem;
  }
  .my-search-bar-input1{
    left: 0rem;
  }
  .my-search-bar-inputted{
    width: 75%;
  }
  .my-search-bar-close{
    position: absolute;
    right: 0.5rem;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    background: url(../../static/images/close-icon.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
  .my-search-bar-button{
    margin-left: 0.5rem;
    width: 3rem;
    height: 1.8rem;
    background: #2ca9ff;
    border: none;
    border-radius: 1.8rem;
    color: #ffffff;
    font-size: 0.75rem;
    position: absolute;
    top: 0.7rem;
    right: 0.5rem;
  }
</style>

<script>
  export default({
    name:'search',
    data(){
      return {
        inputFocus: false, //默认输入框不获取焦点
        content: "", //搜索的内容
        showSearch: false, //默认不显示搜索按钮
        imgUrl: serverUrl,
        showResult: false,
        noItems: true,
        searchItems: []
      }
    },
    props: {
      titleName: {type: [String,String], default:"全部标签"},
      search: null,
      method: null,
      placeholder: {type: [String,String], default: "请输入搜索关键字"},
      addQueryTag: null,//点击将复制选中数据
      btnStyle: {
        default: {}
      }
    },
    methods: {
      leftGo(){
        this.method();
      },
      checkContent(){
        this.content = this.content.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\.]/g,""); //去除特殊字符
        this.content = this.content.replace(/\s/g,"");//去除空格
        if(this.content.length != 0){
          this.showSearch = true; //显示搜索按钮
        }
        else{
          this.showSearch = false; //显示搜索按钮
        }
      },
      clearContent(){
        this.content = "";
        this.showSearch = false;
      },
      searchContent(){ //搜索关键字
        this.search(this.content);
      }
    }
  });
</script>
